<template lang="pug">
  .health
    .title {{data.title}}
    table
      tr
        th
          i.iconfont.icon-paiming3
        th 单位
        th 数值
      tr(v-for="(item,index) in data.list")
        td
          i(v-if="index === 0").iconfont.icon-paiming
          i(v-else-if="index === 1").iconfont.icon-paiming1
          i(v-else-if="index === 2").iconfont.icon-paiming2
          span(v-else) {{index}}

        td
          .unit {{item.unit}}
        td
          .score(:class="{active:active}") {{processScore(item.score)}}
            span(:class="{active:active}") 分
    .m-total-comp
      .comp
        .value(:class="{active:active}") {{mean}}分
        .desc 总健康度平均值
    .m-btns
      .btn(:class="{active:Index===1}" @click="setMax") 最大
      .btn(:class="{active:Index===2}" @click="setMin") 最小
</template>
<script>
let data = {
  title: '单位（部门）健康度',
  list: [
    {
      unit: '工商局',
      score: 96.0
    },
    {
      unit: '住建局',
      score: 95.0
    },
    {
      unit: '公积金中心',
      score: 93.0
    },
    {
      unit: '教育局',
      score: 91.5
    },
    {
      unit: '发改委',
      score: 90.0
    }
  ]
}
let data1 = {
  title: '应用系统健康度',
  list: [
    {
      unit: '企业网上登记平台',
      score: 91.5
    },
    {
      unit: '智慧环保平台',
      score: 90.0
    },
    {
      unit: '政务服务一站通',
      score: 88.5
    },
    {
      unit: '职称管理服务平台',
      score: 84.0
    },
    {
      unit: '政务服务网',
      score: 83.0
    }
  ]
}
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    mean () {
      if (!this.data.length) return
      let arr = this.data.list.map(d => d.score)
      return arr.reduce((a, b) => a + b, 0) / data.list.length
    }
  },
  data () {
    return {
      data: [],
      Index: 1
    }
  },
  mounted () {
    this.$axios.get('/data.json').then(res => {
      if (res.status === 200) {
        let { health, health1 } = res.data
        this.data = !this.active ? health : health1
      }
    })
  },
  methods: {
    processScore (val) {
      return val.toFixed(1).toString()
    },
    setMax () {
      this.Index = 1
      this.data.list.sort((a, b) => {
        return b.score - a.score
      })
    },
    setMin () {
      this.Index = 2
      this.data.list.sort((a, b) => {
        return a.score - b.score
      })
    }

  }
}
</script>

<style lang="stylus" scoped>
  .health
    position relative
    height 218px
    background #ad3119
    background-color #09153d
    box-shadow 0px 1px 2px 0px rgba(9, 14, 33, 0.75)
    margin-bottom 22px
    .title
      padding 0 15px
      height 32px
      line-height @height
      background-color #041646
      font-size 14px
    table
      width 400px
      margin 11px 0 0 18px
      tr
        th
          height 23px
          line-height @height
          background-color: #08194d
          font-size 12px
          color #0970cf
          text-align left
          padding-left 25px
          &:first-of-type
            text-align center
            padding-left 10px
        td
          height 28px
          line-height @height
          border-bottom 1px solid #08194d
          font-size 12px
          padding-left 25px
          &:first-of-type
            text-align center
            padding-left 10px
          .unit
            color #ccf8fe
          .score
            color #ffec0c
            letter-spacing 1px
            &.active
              color #ff00ff
            span
              color #615b1a
              display inline-block
              margin-left 5px
              &.active
                color #670267
    .m-total-comp
      position absolute
      top 46px
      right 27px
      width 128px
      height 71px
      border solid 1px #0c287e
      &:before
      &:after
        position absolute
        content ""
        width 5px
        height 5px
        background-color #0c287e
      &:before
        top -3px
        left -3px
      &:after
        bottom -3px
        left -3px
      .comp
        width 100%
        height 100%
        text-align center
        padding 13px 0

        &:before
        &:after
          position absolute
          content ""
          width 5px
          height 5px
          background-color #0c287e
        &:before
          top -3px
          right -3px
        &:after
          bottom -3px
          right -3px
        .value
          font-size 20px
          color #d2c31d
          &.active
            color #ff00ff
        .desc
          font-size 14px
          color #bce5fd
          margin-top 16px
    .m-btns
      position absolute
      top 136px
      right 101px
      .btn
        width 53px
        height 20px
        line-height @height
        text-align center
        border solid 1px #263a7c
        border-radius 2px
        margin-bottom 22px
        color  #fefefe
        font-size 14px
        cursor pointer
        &.active
          background-color: #025bbf;
          border 1px solid #09153d
</style>
